<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房屋信息</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <section>
        <!--顶部返回-->
        <header>
            <div class="Ltitle">
                <img src="./images/Frame2.png"><span>合租· 朝阳喜瑞公寓-主卧带卫生间</span>
            </div>
            <img src="./images/Frame0.png">
        </header>

        <!--主题部分-->
        <main>
            <nav>
                <span>主卧</span>
                <span>客厅</span>
                <span>厨房(1)</span>
                <span>卫生间</span>
                <span>户型图</span>
                <span>视频</span>
                <span>全景图片</span>
            </nav>
            
            <div class="house-img">
                <img src="./images/Rectangle 1454.png" alt=""></img>
                <img src="./images/Rectangle 1454.png" alt=""></img>
            </div>

            <div class="house-rent">
                <div style="height: 0.3rem;">
                    <span style="font-size: 0.14rem;">¥</span>
                    <span style="font-size: 0.26rem;">3990</span>
                    <span style="font-size: 0.16rem;">/月(年付价)</span>
                    <span style="font-size: 0.  12rem; color: #999999; float: right;">租金试算 ></span>
                </div>
                <div class="discount">
                    <img src="./images/标签-暖冬.png" alt="">
                    <span>万份暖冬补贴，最高2800元。</span>
                    <span style="color: #36D1A1; float: right;">></span>
                </div>

                <div class="discount">
                    <img src="./images/标签-暖冬.png" alt="">
                    <span>万份暖冬补贴，最高2800元。</span>
                    <span style="color: #36D1A1; float: right;">></span>
                </div>
            </div>

            <div class="house-info">
                <div class="house-Linfo">
                    <div>
                        <span>使用面积</span>
                        <span>10.5m<sup>2</sup></span>
                    </div>
                    <div>
                        <span>朝向</span>
                        <span>朝北</span>
                    </div>
                    <div>
                        <span>户型</span>
                        <span>4室2厅3卫</span>
                    </div>
                    <div>
                        <span>楼层</span>
                        <span>11/14</span>
                    </div>
                </div>

                <div class="house-Rinfo">
                    <div>
                        <div>
                            <span>8号线</span>
                            <span>后沙峪地铁站</span>
                        </div>
                        <div>
                            <span>步行约</span>
                            <span>1.5公里</span>
                        </div>
                    </div>
                    <div>
                        <div>
                            <img src="" alt="">
                            <span>设置公司</span>
                            <span>></span>
                        </div>
                        <div>
                            <span>这里查看到公司需要多久</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="lables">
                <span>省心长签></span>
                <span>省心长签</span>
                <span>省心长签</span>
                <span>省心长签</span>
                <span>省心长签</span>
            </div>

            <div class="detail">
                <div>
                    <span>入住</span>
                    <span>随时入住</span>
                </div>
                <div>
                    <span>租期</span>
                    <span>可长租1年 | 可长租2年</span>
                </div>
                <div>
                    <span>入住</span>
                    <span>随时入住</span>
                </div>
                <div>
                    <span>厨房</span>
                    <span>有</span>
                    <span>电梯</span>
                    <span>有</span>
                </div>
                <div>
                    <span>年代</span>
                    <span>2022年建成</span>
                    <span>装修</span>
                    <span>谷粒6.0</span>
                </div>
                <div>
                    <span>上架</span>
                    <span>非首次出租</span>
                    <span>供暖</span>
                    <span>集体供暖</span>
                </div>
                <div>
                    <span>绿化</span>
                    <span>30%</span>
                </div>
                <div>
                    <span>环保</span>
                    <span>房屋空气质量已检测</span>
                    <span style="left: 1.8rem">查看报告</span>
                </div>
                <div>
                    <span>小区</span>
                    <span style="color: #FF4141;">朝阳喜瑞公寓1期（8套） ></span>
                </div>
                <article>
                    <span>*部分房源信息详见底部详解</span>
                    <span style="float: right;">房屋状况说明书</span>
                </article>
            </div>

            <div class="renters">
                <div class="title2">房屋信息</div>
                <div class="a-renter" style="margin-top: 0.16rem;">
                    <div>
                        <img src="./images/Ellipse 450.png" alt="">
                        <span>02卧·已租5个月</span>
                    </div>
                    <div>
                        <span style="margin-right: 0.08rem; color: #999999;">女</span>
                        <span style="border:1px solid #999999;padding: 0 0.08rem; border-top: none; border-bottom: none;color: #999999;">天蝎座</span>
                        <span style="margin-left: 0.08rem;color: #999999;">商务市场</span>
                    </div>
                </div>
                    <div class="a-renter" style="margin-top: 0.08rem;">
                        <div>
                            <img src="./images/Ellipse 450.png" alt="">
                            <span>02卧·已租5个月</span>
                        </div>
                        <div>
                            <span style="margin-right: 0.08rem;color: #999999;">女</span>
                            <span style="border:1px solid #999999;padding: 0 0.08rem; border-top: none; border-bottom: none;color: #999999;">天蝎座</span>
                            <span style="margin-left: 0.08rem;color: #999999;">商务市场</span>
                        </div>
                    </div>
            </div>

            <div class="equipment">
                <div class="title2">物品配置</div> 
 
                    <div class="equipment-public">
                        <div style="margin-top: 0.16rem;">
                            <span style="font-weight: 700; margin-right: 0.1rem;">01房间</span>
                            <span style="font-size: 0.1rem;color:#999999;">6件物品</span>
                        </div>
                        <div class="equipment-public-content">
                            <div>
                                <img src="./images/icon-物品.png" alt="">
                                <span>三开门衣柜</span>
                            </div>
                            <div>
                                <img src="./images/icon-物品.png" alt="">
                                <span>三开门衣柜    </span>
                            </div>
                            <div>
                                <img src="./images/icon-物品.png" alt="">
                                <span>三开门衣柜    </span>
                            </div>
                            <div>
                                <img src="./images/icon-物品.png" alt="">
                                <span>三开门衣柜    </span>
                            </div>
                            <div>
                                <img src="./images/icon-物品.png" alt="">
                                <span>三开门衣柜    </span>
                            </div>
                            <div>
                                <img src="./images/icon-物品.png" alt="">
                                <span>三开门衣柜    </span>
                            </div>
                        </div>
                    </div>               
                    <div class="equipment-privace">
                        <div style="margin-top: 0.24rem;">
                            <span style="font-weight: 700; margin-right: 0.1rem;">公共区域</span>
                            <span style="font-size: 0.1rem;color:#999999;">10件物品</span>
                        </div>
                        <div class="equipment-privace-content">
                            <div>
                                <img src="./images/icon-物品.png"></img>
                                <span>三开门衣柜</span>
                            </div>
                            <div>
                                <img src="./images/icon-物品.png"></img>
                                <span>三开门衣柜</span>
                            </div>
                            <div>
                                <img src="./images/icon-物品.png"></img>
                                <span>三开门衣柜</span>
                            </div>
                            <div>
                                <img src="./images/icon-物品.png"></img>
                                <span>三开门衣柜</span>
                            </div>
                            <div>
                                <img src="./images/icon-物品.png"></img>
                                <span>三开门衣柜</span>
                            </div>
                            <div>
                                <img src="./images/icon-物品.png"></img>
                                <span>三开门衣柜</span>
                            </div>
                            <div>
                                <img src="./images/icon-物品.png"></img>
                                <span>三开门衣柜</span>
                            </div>
                            <div>
                                <img src="./images/icon-物品.png"></img>
                                <span>三开门衣柜</span>
                            </div>
                            <div>
                                <img src="./images/icon-物品.png"></img>
                                <span>三开门衣柜</span>
                            </div>
                            <div>
                                <img src="./images/icon-物品.png"></img>
                                <span>三开门衣柜</span>
                            </div>
                        </div>
                </div>
            </div>

            <div class="guarantee">
                <div class="title2">租住服务与保障</div>
                <div style="color: #666666;">谷粒专享</div>
                <div class="guarantee-content">
                    <div class="guarantee-content-minbox">
                        <img src="./images/Frame 781.png" alt="">
                        <div>
                            <span>租期保洁服务</span>
                            <span>全天保修10min响应</span>
                        </div>
                    </div>
                    <div class="guarantee-content-minbox">
                        <img src="./images/Frame 781.png" alt="">
                        <div>
                            <span>租期保洁服务</span>
                            <span>全天保修10min响应</span>
                        </div>
                    </div>
                    <div class="guarantee-content-minbox">
                        <img src="./images/Frame 781.png" alt="">
                        <div>
                            <span>租期保洁服务</span>
                            <span>全天保修10min响应</span>
                        </div>
                    </div>
                    <div class="guarantee-content-minbox">
                        <img src="./images/Frame 781.png" alt="">
                        <div>
                            <span>租期保洁服务</span>
                            <span>全天保修10min响应</span>
                        </div>
                    </div>
                </div>
                <div class="guarantee-more">查看全部内容</div>
            </div>
        </main>

        <!--底部预定功能-->
        <footer>
            <div>
                <div class="icon-box">
                    <img src="./images/Frame1.png" alt="">
                    <span>99+</span>
                </div>
                <div class="icon-box">
                    <img src="./images/Frame1.png" alt="">
                    <span>99+</span>
                </div>
            </div>
            <div class="button-box">立即预定</div>
            <div class="button-box" style="background-color: #36D1A1;">去看房</div>
        </footer>
    </section>
</body>
</html>